import React from "react"
import { Text, Navigator, View } from "@tarojs/components"
import clsx from "clsx"
import { pageMapper } from "@/constants/pageMap"
import { makePagePath } from "@/utils/router"
import styles from "./index.module.scss"

type IProps = {
  className?: string
  border?: boolean
  article: {
    id: number
    title: string
    picture: string
    introduction: string
    articleCount: number
    views: number
  }
  titleBold?: boolean
  navigation?: boolean
}
/** 专题文章列表item */
const GpColumnArticle: React.FC<IProps> = (props: IProps) => {
  const { className, border = true, article, titleBold = false, navigation = true } = props
  if (!navigation) {
    return (
      <View className={clsx("bg-hex-fff", className)}>
        <View
          className={clsx("bg-image", styles["image"])}
          style={{
            backgroundImage: `url(${article.picture})`
          }}
        >
          <View
            className={clsx(
              "yahei pt-50px font-normal text-32px text-hex-fff absolute bottom-0 left-0 right-0 pl-32px pb-28px",
              {
                [styles["bold-title"]]: titleBold
              }
            )}
          >
            <View className={styles["title-mask"]}></View>
            <View className="relative">
              <Text>{article.title}</Text>
            </View>
          </View>
        </View>
        <View
          className={clsx(styles["content"], {
            [styles["border"]]: border
          })}
        >
          <View className="yahei font-normal text-28px text-hex-666 leading-42px">
            <Text>{article.introduction}</Text>
          </View>
          <View className="mt-24px yahei font-normal text-24px text-hex-b8b8bf">
            <Text>{article.articleCount}篇文章</Text>
            <Text className="pl-29px">{article.views}人看过</Text>
          </View>
        </View>
      </View>
    )
  }
  const url = makePagePath(pageMapper.columnMain, { id: article.id })
  return (
    <Navigator hoverClass="none" url={url} className={clsx("bg-hex-fff", className)}>
      <View
        className={clsx("bg-image", styles["image"])}
        style={{
          backgroundImage: `url(${article.picture})`
        }}
      >
        <View
          className={clsx(
            "yahei pt-50px font-normal text-32px text-hex-fff absolute bottom-0 left-0 right-0 pl-32px pb-28px",
            {
              [styles["bold-title"]]: titleBold
            }
          )}
        >
          <View className={styles["title-mask"]}></View>
          <View className="relative">{article.title}</View>
        </View>
      </View>
      <View
        className={clsx(styles["content"], {
          [styles["border"]]: border
        })}
      >
        <View className="yahei font-normal text-28px text-hex-666 leading-42px">
          {article.introduction}
        </View>
        <View className="mt-24px yahei font-normal text-24px text-hex-b8b8bf">
          <Text>{article.articleCount}篇文章</Text>
          <Text className="pl-29px">{article.views}人看过</Text>
        </View>
      </View>
    </Navigator>
  )
}
export default GpColumnArticle
